<script setup name="chart">
	import {
		reactive,
	} from 'vue';

	import api from '@/api/api';
	import util from '@/utils/util';

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	const modelValue = defineModel();
	// 
	const list = reactive([{
		name: '计算机基础实验教学中心',
		percent: 60,
		color: '#FFAB00',
	}, {
		name: '基础生物实验教学中心',
		percent: 50,
		color: '#03CEFC',
	}, {
		name: '基础物理实验教学中心',
		percent: 70,
		color: '#FB2F1C',
	}, {
		name: '基础化学实验教学中心',
		percent: 80,
		color: '#14DC92',
	}, {
		name: '农科基础实验教学中心',
		percent: 60,
		color: '#FFAB00',
	}, {
		name: '食品科学与工程学院教学实验室',
		percent: 50,
		color: '#03CEFC',
	}, {
		name: 'xxxx中心',
		percent: 70,
		color: '#FB2F1C',
	}, {
		name: 'xxx中心',
		percent: 80,
		color: '#14DC92',
	}])
	// 回调
	const emit = defineEmits(["change", ""]);
</script>

<template>
	<div class="chart-list" style="height: 100%;">
		<div class="chart-list-li" :class="{'k':index>2}" v-for="(item,index) in list" :key="index">
			<div :id="`chart${index}`" class="circular-progress" :style="{
				 background: `conic-gradient(${item.color} 60%, #ededed 0)`
			}">
				<div class="progress-value">
					<p><span>{{item.percent}}</span>%</p>
					<div class="dcl">达成率</div>
				</div>
			</div>
			<p class="chart-list-li-title">{{item.name}}</p>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.chart-list {
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(4, 1fr);
		padding: 10px;

		&-li {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 0;
			text-align: center;
			font-size: 14px;

			/* 圆形进度条基础样式 */
			.circular-progress {
				position: relative;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				/* 进度颜色和背景色 */
				display: flex;
				justify-content: center;
				align-items: center;

				&::before {
					content: "";
					position: absolute;
					width: 85%;
					/* 调整内圈大小 */
					height: 85%;
					border-radius: 50%;
					background: #071E49;
					/* 内圈背景色 */
				}

				/* 显示在圆心的文本 */
				.progress-value {
					width: 70%;
					height: 70%;
					border: 2px solid #CCCCCC;
					border-radius: 100px;
					position: absolute;
					font-size: 10px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					p {
						margin-top: -5px;
						font-family: "Impact Normal", "Impact", sans-serif;

						span {
							font-family: "Impact Normal", "Impact", sans-serif;
							font-size: 24px;
							font-weight: 400;
							font-style: normal;
						}
					}

					.dcl {
						margin-top: -8px;
					}
				}
			}

			/* 如果需要动态改变进度，可以使用CSS变量 */
			// .circular-progress .circular-progress {
			// 	/* 其他属性保持不变 */
			// 	background: conic-gradient(#ff6a00 var(--progress, 0%), #ededed 0);
			// }

		}
	}
</style>